//@ts-nocheck
import React, { useState, useContext } from 'react';

//@ts-ignore
const MyContext = React.createContext();

// function Counter(){
//     return (
//         <div>
//             <MyContext.Consumer className="Consumer">
//                 {
//                     //@ts-ignore
//                     value => (
//                         <div>
//                             <p>{value.state.number}</p>
//                             <button onClick={()=>value.setState({number:value.state.number+1})}>+</button>
//                         </div>
//                     )
//                 }
//             </MyContext.Consumer>
//         </div>
//     )
// }

//↑这样写太啰嗦了
/*
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值
useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>
useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。你仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context
*/
function Counter() {
  const {state, setState} = useContext(MyContext);
  const log = ()=>setTimeout(()=>console.log(state),1500); // 打印的仍然是老的
  return (
    <div>
      <p>{state.number}</p>
      <button onClick={()=>setState({number: state.number + 1})}>+</button>
      <button onClick={log}>log</button>
    </div>
  )
}

export default function App(){
  const [state, setState] = useState({number: 0});
  return (
    <MyContext.Provider className="Provider" value={{state,setState}}>
      <Counter/>
    </MyContext.Provider>
  )
}
